<template>
  <el-row :gutter="14" class="viewRow">
    <el-col
      :xs="24"
      :sm="12"
      :md="8"
      :lg="4"
      :xl="4"
      v-for="(item, index) in data"
      :key="index"
    >
      <el-card
        :body-style="{
          padding: '0',
          position: 'relative',
          display: 'flex',
          flexWrap: 'wrap',
        }"
        shadow="hover"
      >
        <div class="elImages">
          <el-image
            :src="url + item.img[0]"
            class="imageFile Left"
            fit="cover"
            lazy
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <el-image
            :src="url + item.img[1]"
            class="imageFile Right"
            fit="cover"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <div class="itemText">
          <span class="itemTitle">{{ item.title }}</span>
          <span class="itemSmTitle">
            <i class="el-icon-time"></i>
            {{ item.time.slice(0, 10) }}
            <!-- 取年月日 -->
            {{ item.time.slice(11, 13) * 1 + 8 }}:
            <!-- 取小时/再转nub+转东8时区+8-->
            {{ item.time.slice(14, 16) }}
            <!-- 取分秒 -->
          </span>
        </div>
        <div class="clickItem" @click="getDescribe(item.title)"></div>
      </el-card>
    </el-col>
    <div class="bottom"></div>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      url: this.$config.apiUrl,
    };
  },
  props: {
    data: Array,
  },
  mounted() {
    this.data = this.data;
  },
  methods: {
    async getDescribe(id) {
      // this.$router.push({
      //   path: `/page/${id}`,
      // });
       window.open(`#/page/${id}`,'_blank') // 新窗口打开外链接
    },
    // async getApi() {
    //   const { data, res } = await this.$http.get("item");
    //   console.log(data)
    //   if (data.Code !== 200) return this.$message.error(data.message);
    //   this.data = data.floder;
    //   console.log(this.data)
    // },
  },
};
</script>

<style lang="less" >
/* // 公共样式 */
.imageFile {
  .el-image__inner {
    position: absolute;
    height: auto;
    top: 0;
  }
  .image-slot {
    text-align: center;
    margin: 0 auto;
    font-size: 32px;
    color: #999;
  }
}
.el-card__body {
  .el-image::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    transition: opacity 0.3s;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 9;
    opacity: 0.1;
  }
}
.el-card__body:hover .el-image::before {
  opacity: 0.3;
  transition: opacity 0.3s;
}
.el-card__body:hover .Left {
  left: -100%;
}
.el-card__body:hover .Right {
  right: 0;
}
.clickItem {
  z-index: 9;
}
</style>
<style  lang="less" scoped>
.el-col {
  border-radius: 4px;
  margin-bottom: 15px;
}
.elImages {
  width: 100%;
  height: 145px;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
.imageFile {
  width: inherit;
  height: 145px;
  display: flex !important;
  align-items: center;
}
.Left {
  position: absolute;
  top: 0;
  left: 0;
  transition: left 0.5s;
}
.Right {
  top: 0;
  right: -100%;
  transition: right 0.5s;
}
.clickItem {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  top: 0;
  left: 0;
  cursor: pointer;
}
.itemText {
  width: inherit;
  padding: 16px 10px;
  overflow: hidden;
  height: 50px;
  .itemTitle {
    width: inherit;
    display: block;
    font-size: 18px;
    color: #333;
    overflow: hidden;
    margin-bottom: 2px;
    text-overflow: ellipsis; //文字隐藏后添加省略号
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-weight: 500;
  }
  .itemSmTitle {
    font-size: 14px;
    height: 20px;
    color: #bbb;
    i {
      margin-right: 5px;
    }
  }
  .itemView {
    color: #666;
    text-align: left;
    font-size: 14px;
    span {
      margin-left: 6px;
    }
  }
}
//隐藏滚动条
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.bottom {
  width: inherit;
  height: 25px;
  display: block;
}
</style>